<template>
  <div class="order-payment">
    <van-nav-bar
      title="确认支付"
      left-text="返回商家"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="order-summary">
      <p class="order-amount">¥{{ totalAmount }}</p>
    </div>
    <div class="payment-methods">
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <van-cell title="微信支付" clickable @click="checked = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
            <template #icon>
              <img class="icon-img" src="../../assets/payment2.png" />
            </template>
          </van-cell>
          <van-cell title="支付宝支付" clickable @click="checked = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
            <template #icon>
              <img class="icon-img" src="../../assets/payment1.png" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-button type="primary" block @click="confirmTransaction"
      >确认交易</van-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "../../utils/http"; //导入异步交互的工件
import { Notify, showNotify } from "vant";
const route = useRoute(); // 使用 useRoute 钩子获取当前路由信息
const router = useRouter();
const totalAmount = ref("26.00"); // 总金额
const checked = ref("1");
const confirmTransaction = () => {
  updateOrderStatus();
  showNotify({ type: "success", message: "支付成功", duration: 1000 });
  router.push("/orderList");
};
const orderId = route.query.orderId;
// 当组件被挂载时，打印 orderId
onMounted(() => {
  // console.log("订单id为0000", route.query.orderId);
  getOrderFeeById(route.query.orderId);
});
//最上方的返回按钮被点击
const onClickLeft = () => {
  router.back();
};
//根据订单的id获取订单费用
const getOrderFeeById = async (orderId) => {
  try {
    const response = await http.get(`/order/getOrderById/${orderId}`);

    if (response.data.msg === "success") {
      totalAmount.value = response.data.data.price;
    }
  } catch {}
};
//修改订单状态
const updateOrderStatus = async () => {
  try {
    const response = await http.get("/order/updateOrderStatus", {
      params: {
        orderId: orderId,
        orderStatus: 1,
      },
    });

    if (response.data.msg === "success") {
      totalAmount.value = response.data.data.price;
      showNotify({
        type: "success",
        message: "修改订单状态成功",
        duration: 1000,
      });
    }
  } catch {}
};
</script>

<style scoped>
::v-deep(.van-nav-bar) {
  background-color: white;
}
.order-summary {
  flex: 1;
  margin-bottom: 16px;
  align-content: center;
}
.order-amount {
  text-align: center; /* 使文本居中 */
  font-size: 24px; /* 设置字体大小，根据需要调整 */
  color: #f00e0e; /* 设置字体颜色，根据需要调整 */
  font-weight: bold; /* 设置字体加粗 */
}
.payment-methods {
  margin-bottom: 16px;
}
.icon-img {
  width: 35px;
  margin-right: 15px;
  margin-top: -5px;
}
</style>